{% from 'bootstrap/nav.html' import render_nav_item %} {# 导入Bootstrap-Flask的内置函数 #}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        {% block head %}
            <title>{% block title %}{% endblock %} - Albumy</title>
            <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
            {% block styles %}
                <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
                <link rel="stylesheet" href="{{ url_for('static', filename='open-iconic/font/css/open-iconic-bootstrap.css') }}">
                <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
            {% endblock styles %}
        {% endblock head %}
    </head>

    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="/">Albumy</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    {{ render_nav_item('main.index', '首页') }} {# 使用Bootstrap-Flask内置的函数渲染导航链接 #}
                </ul>
                <ul class="navbar-nav ml-auto">
                    {% if not current_user.is_authenticated %}
                        {{ render_nav_item('auth.login', '登录') }}
                        {{ render_nav_item('auth.register', '注册') }}
                    {% else %}
                        <span class="navbar-text">
                            Hi, {{ current_user.username }}                            
                        </span>
                        {{ render_nav_item('auth.logout', '注销') }}
                    {% endif %}
                </ul>
            </div>            
        </nav>
        <br>
        <main>
            <div class="container">
                {% for message in get_flashed_messages(with_categories=True) %}
                    <div class="alert alert-{{ message[0] }}">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        {{ message[1] }}
                    </div>
                {% endfor %}
                {% block content %}{% endblock %}
                {% block footer %}
                    <footer>
                        <p class="float-left">
                            <small>&copy; 2021
                                <a href="https://gitee.com/windstarry/Albumy" title="Fork me on Gitee">Gitee</a>
                            </small>
                        </p>
                        <p class="float-right">
                            <small>Capture and share every wonderful moment.</small>
                        </p>
                    </footer>
                {% endblock %}
            </div>
        </main>

    </body>


    
   

    {% block scripts %}
        <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
        {{ moment.include_moment(local_js=url_for('static', filename='js/moment-with-locales.min.js')) }}
        <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    {% endblock %}

</html>